<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap-5.1.3-dist/css/bootstrap.css">
    <script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
    <!--css文件-->
    <link rel="stylesheet" href="css/style.css">
    <!--字体图标文件-->
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
    <!--灯箱插件-->
    <link rel="stylesheet" href="swipebox-master/src/css/swipebox.css">
    <script src="swipebox-master/lib/jquery.min.js"></script>
    <script src="swipebox-master/src/js/jquery.swipebox.js"></script>
    <style>
        #div1{
            width: 100%;
            height: 300px;
            margin: 150px auto;
            position: relative;
            overflow: hidden;
            border: 2px solid white;
            background-color: white;
        }
        #div1 ul{
            height:240px;
            position:absolute;
            left:0;
            top:0;
            overflow: hidden;
            background-color: white;
        }
        #div1 ul li{
            float: left;
            width: 360px;
            list-style: none;
            margin-left:1.1rem;
        }
        .btn-box{
            position: relative;
            left: 0;
            top: 255px;
        }
    </style>

</head>
<body>
<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="index.html"><img src="images/logo.jpg" alt="" width="45"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav me-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="index.html">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="class.html">分类</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="blog.html">博客</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact.html">联系</a>
                </li>
            </ul>
            <form class="d-flex">
                <input class="me-sm-2" type="search" placeholder="搜索">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
            </form>
        </div>
    </nav>
    <div id="div1" >
        <ul id="ul1" class="py-3">
            <li>
                <a href="images/002.jpg" class="swipebox" title="2028年">
                    <img src="images/002.jpg" alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="images/003.jpg" class="swipebox" title="2028年">
                    <img src="images/003.jpg" alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="images/004.jpg" class="swipebox" title="2028年">
                    <img src="images/004.jpg" alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="images/005.jpg" class="swipebox" title="2028年">
                    <img src="images/005.jpg" alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="images/006.jpg" class="swipebox" title="2028年">
                    <img src="images/006.jpg" alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="images/007.jpg" class="swipebox" title="2028年">
                    <img src="images/007.jpg" alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="images/010.jpg" class="swipebox" title="2028年">
                    <img src="images/010.jpg" alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="images/008.jpg" class="swipebox" title="2028年">
                    <img src="images/008.jpg" alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="images/009.jpg" class="swipebox" title="2028年">
                    <img src="images/009.jpg" alt="image" class="img-fluid">
                </a>
            </li>

            <li>
                <a href="images/011.jpg" class="swipebox" title="2028年">
                    <img src="images/011.jpg" alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="images/012.jpg" class="swipebox" title="2028年">
                    <img src="images/012.jpg" alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="images/013.jpg" class="swipebox" title="2028年">
                    <img src="images/013.jpg" alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="images/014.jpg" class="swipebox" title="2028年">
                    <img src="images/014.jpg" alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="images/015.jpg" class="swipebox" title="2028年">
                    <img src="images/015.jpg" alt="image" class="img-fluid">
                </a>
            </li>
        </ul>
        <div class="btn-box text-center mb-2">
            <a href="#" id="btn1" class="mr-5"><i class="fa fa-hand-o-left fa-2x"></i></a>
            <a href="#" id="btn2" class=""><i class="fa fa-hand-o-right fa-2x"></i></a>
        </div>
    </div>
</div>
</body>
<script>
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        var oUl = document.getElementById('ul1');
        var speed = 2;//初始化速度
        oUl.innerHTML += oUl.innerHTML;               //图片内容*2
        var oLi= document.getElementsByTagName('li');
        oUl.style.width = oLi.length*160+'px';        //设置ul的宽度使图片可以放下
        var oBtn1 = document.getElementById('btn1');
        var oBtn2 = document.getElementById('btn2');
        function move(){
            if(oUl.offsetLeft<-(oUl.offsetWidth/2)){//向左滚动，当靠左的图4移出边框时
                oUl.style.left = 0;
            }
            if(oUl.offsetLeft > 0){//向右滚动，当靠右的图1移出边框时
                oUl.style.left = -(oUl.offsetWidth/2)+'px';
            }
            oUl.style.left = oUl.offsetLeft + speed + 'px';
        }
        oBtn1.addEventListener('click',function(){
            speed = -2;
        },false);
        oBtn2.addEventListener('click',function(){
            speed = 2;
        },false);
        var timer = setInterval(move,30);//全局变量 ，保存返回的定时器
        // oDiv.addEventListener('mouseout', function () {
        //     timer = setInterval(move,30);
        // },false);
        // oDiv.addEventListener('mousemove', function () {
        //     clearInterval(timer);//鼠标移入清除定时器
        // },false);
    }
</script>
<script>
    // 绑定了.swipebox类
    jQuery(function($) {
        $(".swipebox").swipebox({
            useCSS : true,                    // 不使用jQuery的动画效果。
            useSVG : true,                    // 不对按钮使用png
            initialIndexOnArray : 0,          // 传递数组时初始化图像索引
            hideCloseButtonOnMobile : false,  // 显示移动设备上的关闭按钮
            removeBarsOnMobile : true,        // 在移动设备上不显示顶部栏
            hideBarsDelay : 3000,             // 隐藏信息条的延时时间为3秒
            loopAtEnd: false                  // 到达最后一个图像后不返回到第一个图像
        });
    });
</script>
</html>